<!DOCTYPE html >
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" layout:decorator="layout">
<body>
<div layout:fragment="content">
<section class="view-header">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <ul class="breadcrumb">
                    <li><a href="/index">首页</a></li>
                    <li><a th:href="@{'~/hiview/'+${column.id}}" th:text="${column.columnName}">所属栏目</a></li>
                    <li class="active" th:text="${article.title}">详细内容</li>
                </ul>
            </div>
        </div>
    </div>
</section>
<section class="view-content-info">
    <div class="container">
        <div class="row">
            <div class="col-sm-9">
                <div class="view-content-left">
                    <div class="content-header">
                        <h2 th:text="${article.title}">内容标题</h2>
                        <span><a href="#"><img src="/img/img1.jpg" style="float:left;height: 25px;width: 25px;border-radius: 50%;margin-right: 5px"><span th:text="${article.author}">作者名称</span></a> <i class="fa fa-clock-o"></i ><span th:text="${#dates.format(article.publishTime, 'yyyy-MM-dd')}">2015-7-18</span></span>
                    </div>
                    <p></p>
                    <!--<img src="http://d.36krcnd.com/nil_class/578f3d11-b590-4ab9-a427-24a3dde4cd54/yestone_HD_1120813147.jpg!heading" class="img-responsive"/>-->
                    <section class="article" th:utext="${article.content}">
                    </section>
                    <hr />
					<!-- 代码1：放在页面需要展示的位置  -->
				
					<div id="cyReward" th:attr="sourceid=|${article.sourceId}" role="cylabs" data-use="reward" style="text-align:center;"></div>
					<script type="text/javascript" charset="utf-8" src="https://changyan.itc.cn/js/lib/jquery.js"></script>
					<script type="text/javascript" charset="utf-8" src="https://changyan.sohu.com/js/changyan.labs.https.js?appid=cytBq3eij"></script>
					<!--PC和WAP自适应版-->
					<div id="SOHUCS"  th:attr="sid=|${article.sourceId}"></div> 
					<script type="text/javascript"> 
					(function(){ 
					var appid = 'cytBq3eij'; 
					var conf = 'prod_4615e8be47a095f2549825fda268b023'; 
					var width = window.innerWidth || document.documentElement.clientWidth; 
					if (width < 960) { 
					window.document.write('<script id="changyan_mobile_js" charset="utf-8" type="text/javascript" src="https://changyan.sohu.com/upload/mobile/wap-js/changyan_mobile.js?client_id=' + appid + '&conf=' + conf + '"><\/script>'); } else { var loadJs=function(d,a){var c=document.getElementsByTagName("head")[0]||document.head||document.documentElement;var b=document.createElement("script");b.setAttribute("type","text/javascript");b.setAttribute("charset","UTF-8");b.setAttribute("src",d);if(typeof a==="function"){if(window.attachEvent){b.onreadystatechange=function(){var e=b.readyState;if(e==="loaded"||e==="complete"){b.onreadystatechange=null;a()}}}else{b.onload=a}}c.appendChild(b)};loadJs("https://changyan.sohu.com/upload/changyan.js",function(){window.changyan.api.config({appid:appid,conf:conf})}); } })(); </script>
                    <!--<span class="pull-left">点赞：</span>-->
                    <div class="author-socials pull-right">
					
					
                        
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="view-content-right">
                    <img src="img/img3.jpg" class="img-responsive" />
                </div>
                <div class="view-content-right">
                    <h1>热门文章</h1>
                    <div class="aside-top">
                        <a href="index.html"><img src="/img/img1.jpg" style="float:left;height: 40px;width: 40px;border-radius: 50%;margin-right: 15px">2015应该学习的前端语言与框架</a>
                        <a href="index.html"><img src="/img/img2.jpg" style="float:left;height: 40px;width: 40px;border-radius: 50%;margin-right: 15px">看看硅谷的科技企业是如何开除员工的</a>
                        <a href="index.html"><img src="/img/img3.jpg" style="float:left;height: 40px;width: 40px;border-radius: 50%;margin-right: 15px">大圣归来 三里屯优衣库试衣间是怎么刷爆朋友圈的</a>
                        <a href="index.html"><img src="/img/img4.jpg" style="float:left;height: 40px;width: 40px;border-radius: 50%;margin-right: 15px">不要被VR的火热骗了 至少现在它还真没什么卵用</a>
                    </div>
                </div>
                <div class="view-content-right" style="margin: 20px 0;">
                    <img src="img/img5.jpg" class="img-responsive" />
                </div>

                <div class="view-content-right">
                    <h1>其他文章</h1>
                    <div class="aside-top">
                        <a href="index.html"><img src="/img/img1.jpg" style="height: 40px;width: 40px;border-radius: 50%;margin-right: 15px">2015应该学习的前端语言与框架</a>
                        <a href="index.html"><img src="/img/img2.jpg" style="height: 40px;width: 40px;border-radius: 50%;margin-right: 15px">2015应该学习的前端语言与框架</a>
                        <a href="index.html"><img src="/img/img3.jpg" style="height: 40px;width: 40px;border-radius: 50%;margin-right: 15px">2015应该学习的前端语言与框架</a>
                        <a href="index.html"><img src="/img/img4.jpg" style="height: 40px;width: 40px;border-radius: 50%;margin-right: 15px">2015应该学习的前端语言与框架</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
</div>
</body>
</html>